<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-class与 style绑定</title>
    <script src="../js/vue.js"></script>
    <style>
    	.blue{
    		color: blue;
    	}
    	.red{
    		width: 60px;
    		background-color: red;
    	}
    </style>
</head>
<body>
	
	<div class="test-04" >
		<!--对象语法-普通<div class="red blue">测试框</div>-->
		<div v-bind:class="{red: red,blue: blue}">测试框1</div>
		<!--对象语法-传对象<div class="red ">测试框</div>-->
		<div v-bind:class="obj">测试框2</div>
		<!--对象语法-计算属性<div class="blue ">测试框</div>-->
		<div v-bind:class="fn">测试框3</div>
		<!--数组语法-普通<div class="red blue">测试框</div>-->
		<div v-bind:class="[blueClass, redClass]">测试框4</div>
		<!--数组语法-条件切换<div class="red ">测试框</div>-->
		<div v-bind:class="[obj.blue ? blueClass : '', redClass]">测试框5</div>
		<!--对象和数组语法<div class="red blue">测试框</div>-->
		<div v-bind:class="[{ red: true }, blueClass]">测试框6</div>
		<!--数组语法-计算属性<div class="blue ">测试框</div>-->
		<div v-bind:class="[fn]">测试框7</div>
		<!--v-bind:style 绑定方法大同小异-->
	</div>
	
<script>
    var test = { 
    		blue: true,
    		red: true,
    		blueClass: "blue",
    		redClass: "red",
    		obj:{
    			blue: false,
    			red: true,
    		}
    };
    var vm = new Vue({
    	el:".test-04",
        data: test,
        methods:{
        	
        },
        //计算属性computed
        computed:{
        	fn: function() {
        		return {
        			blue : true,
        			red : false
        		};
        	}
        },
        //计算属性 vs 侦听属性
        watch:{
        	
        }
    });
   
</script>
</body>
</html>